<template>
	<div>
		<div class="container">
			<div class="row">
				<ul class="nav nav-tabs">
					<li role="presentation">
						<router-link :to="{ name: 'adminHome' }">首页</router-link>
					</li>
					<li role="presentation">
						<router-link :to="{ name: 'adminList' }" role="presentation">列表</router-link>
					</li>
					<li role="presentation">
						<span v-if="username">
							欢迎{{ username }}
							<button @click="logout">注销</button>
						</span>
						<router-link :to="{ name: 'login' }" role="presentation" v-else>登录</router-link>
					</li>
				</ul>
				<router-view></router-view>
			</div>
		</div>
	</div>
</template>

<script>
export default {
	data() {
		return {
			username: localStorage.getItem("user"),
		};
	},
	methods: {
		logout() {
			// 清空localStorage
			localStorage.clear();
			// this.username = localStorage.getItem("user");
			this.$router.push("/admin/login");
		},
	},
	watch: {
		// 可以监听路由变化
		"$route.path": function () {
			this.username = localStorage.getItem("user");
		},
	},
};
</script>

<style scoped>
/* .router-link-active {
  color: #fff;
  background-color: #337ab7;
} */
/* .router-link-exact-active {
  color: #fff;
  background-color: #337ab7;
} */
</style>
